import "./index.scss";

import {
  AlipayCircleOutlined,
  LockOutlined,
  MobileOutlined,
  TaobaoCircleOutlined,
  UserOutlined,
  WeiboCircleOutlined,
  WechatOutlined,
  QqOutlined,
  GoogleOutlined,
} from "@ant-design/icons";
import {
  LoginForm,
  ProConfigProvider,
  ProFormCaptcha,
  ProFormCheckbox,
  ProFormText,
  setAlpha,
} from "@ant-design/pro-components";
import LogoSvg from "@/assets/logo.svg";
import { Space, Tabs, message, theme } from "antd";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router";
import { observer } from "mobx-react-lite";
import counter from "@/stores/counter";

const LoginPage = () => {
  const navigate = useNavigate();
  const { token } = theme.useToken();
  const [loginType, setLoginType] = useState("phone");

  useEffect(() => {
    // counter.increment();
    console.log(counter.count);
  }, []);

  // 登录方式tabs
  const loginTabsItems = [
    {
      key: "account",
      label: "账号密码登录",
    },
    {
      key: "phone",
      label: "手机号登录",
    },
  ];

  // 登录加载
  const [isLoginLoading, setIsLoginLoading] = useState(false);

  // 登录表单数据
  const [loginFormData, setLoginFormData] = useState({});

  // icon style
  const iconStyles = {
    marginInlineStart: "16px",
    color: setAlpha(token.colorTextBase, 0.2),
    fontSize: "24px",
    verticalAlign: "middle",
    cursor: "pointer",
  };

  // 表单value change 处理
  const formValuesChange = (e) => {
    console.log(e);
    const { username, password, mobile, captcha } = e;

    let oldData = { ...loginFormData };

    if (username) {
      oldData.username = username;
    }
    if (password) {
      oldData.password = password;
    }
    if (mobile) {
      oldData.mobile = mobile;
    }
    if (captcha) {
      oldData.captcha = captcha;
    }

    setLoginFormData(oldData);
  };

  // 登录校验通过回调
  const loginFinish = () => {
    // 请求表单数据
    let formData;

    if (loginType === "account") {
      // 请求账号密码登录接口
      formData = {
        username: loginFormData.username,
        password: loginFormData.password,
        type: "account",
      };
    } else if (loginType === "phone") {
      // 请求手机号登录接口
      formData = {
        username: loginFormData.mobile,
        password: loginFormData.captcha,
        type: "phone",
      };
    } else {
      // 请求其他登录方式接口
      formData = {
        type: "others",
      };
    }

    console.log(formData);

    setIsLoginLoading(true);
    setTimeout(() => {
      setIsLoginLoading(false);
      message.success("登录成功！");
      navigate("/dashboard");
    }, 2000);
  };

  return (
    <div className="login_page_wrap">
      <ProConfigProvider hashed={false}>
        <div
          className="login_card"
          style={{
            backgroundColor: token.colorBgContainer,
          }}
        >
          <LoginForm
            logo={LogoSvg}
            title="闪电侠"
            subTitle="村里最快的团队项目文档管理平台"
            actions={
              <Space
                style={{ width: "100%", justifyContent: "center" }}
                align="center"
                direction="horizontal"
              >
                <WechatOutlined style={iconStyles} />
                <QqOutlined style={iconStyles} />
                <GoogleOutlined style={iconStyles} />
              </Space>
            }
            loading={isLoginLoading}
            onFinish={(e) => {
              loginFinish(e);
            }}
            onValuesChange={(e) => {
              formValuesChange(e);
            }}
          >
            <Tabs
              centered
              activeKey={loginType}
              onChange={(activeKey) => setLoginType(activeKey)}
              items={loginTabsItems}
              className="login_tabs"
            ></Tabs>
            {loginType === "account" && (
              <>
                {/* 用户名 */}
                <ProFormText
                  style={{
                    marginTop: "50px",
                    fontSize: 10,
                  }}
                  onMetaChange={(e) => {
                    console.log(e);
                  }}
                  name="username"
                  fieldProps={{
                    size: "large",
                    prefix: <UserOutlined className={"prefixIcon"} />,
                  }}
                  placeholder={"手机号 / 用户名 / 邮箱"}
                  rules={[
                    {
                      required: true,
                      message: "请输入手机号/用户名/邮箱!",
                    },
                  ]}
                />

                {/* 密码 */}
                <ProFormText.Password
                  name="password"
                  fieldProps={{
                    size: "large",
                    prefix: <LockOutlined className={"prefixIcon"} />,
                  }}
                  placeholder={"密码"}
                  rules={[
                    {
                      required: true,
                      message: "请输入密码！",
                    },
                  ]}
                />
              </>
            )}
            {loginType === "phone" && (
              <>
                <ProFormText
                  fieldProps={{
                    size: "large",
                    prefix: <MobileOutlined className={"prefixIcon"} />,
                  }}
                  name="mobile"
                  placeholder={"手机号"}
                  rules={[
                    {
                      required: true,
                      message: "请输入手机号！",
                    },
                    {
                      pattern: /^1\d{10}$/,
                      message: "手机号格式错误！",
                    },
                  ]}
                />
                <ProFormCaptcha
                  fieldProps={{
                    size: "large",
                    prefix: <LockOutlined className={"prefixIcon"} />,
                  }}
                  captchaProps={{
                    size: "default",
                  }}
                  placeholder={"请输入验证码"}
                  captchaTextRender={(timing, count) => {
                    if (timing) {
                      return `${count} ${"获取验证码"}`;
                    }
                    return "获取验证码";
                  }}
                  name="captcha"
                  rules={[
                    {
                      required: true,
                      message: "请输入验证码！",
                    },
                  ]}
                  onGetCaptcha={async () => {
                    message.success("获取验证码成功！验证码为：1234");
                  }}
                />
              </>
            )}
            <div
              style={{
                marginBlockEnd: 24,
              }}
            >
              <ProFormCheckbox noStyle name="autoLogin">
                自动登录
              </ProFormCheckbox>
              <a
                style={{
                  float: "right",
                }}
              >
                忘记密码
              </a>
            </div>
          </LoginForm>
        </div>
      </ProConfigProvider>
    </div>
  );
};

export default observer(LoginPage);
